'use client';

import React from 'react';
import { Layout, Card, Typography } from 'antd';
import styles from '../Admin.module.scss';

const { Content } = Layout;
const { Title } = Typography;

interface AdminContentProps {
  children: React.ReactNode;
  collapsed: boolean;
  pageTitle?: string;
  extra?: React.ReactNode;
}

const AdminContent: React.FC<AdminContentProps> = ({
  children,
  collapsed,
  pageTitle,
  extra,
}) => {
  return (
    <Content 
      className={styles.adminContent}
      style={{ marginLeft: collapsed ? 60 : 250 }}
    >
      <div>
        {pageTitle && (
          <Card 
            title={<Title level={4} style={{margin: 0}}>{pageTitle}</Title>}
            extra={extra}
            style={{ marginBottom: '16px' }}
          >
            <div>
              {children}
            </div>
          </Card>
        )}
        
        {!pageTitle && children}
      </div>
    </Content>
  );
};

export default AdminContent;